<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples: Axes tick labels options</title>
    <link href="../examples.css" rel="stylesheet" type="text/css">
    <script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
	<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>

    <style>
    .x1Label {
        fill: #224499;
        font-size: 20px;
        font-family: Tahoma, Geneva, sans-serif;
    }
    .x2Label {
        fill: #224499;
        font-style: italic;
        font-size: 24px;
    }
    .x3Label {
        fill: #225511;
        font-size: 14px;
    }
    .y1Label {
        fill: #772211;
        font-size: 18px;
    }
    .y2Label {
        fill: #772211;
        font-style: bold;
        font-size: 15px;
    }
    </style>

    <script type="text/javascript">

    var data, options, plot;

    $(function() {
        var index = 10000;
        function generate(start, end, fn) {
            var res = [];
            for (var i = 0; i <= 400; ++i) {
                var x = start + i / 400 * (end - start);
                res.push([x, fn(x)]);
            }
            return res;
        }

        function update() {
            index += 0.01;
            data = [
                { data: generate(index, index + 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
            ];
            plot.setData(data);
            plot.setupGrid(true);
            plot.draw();
            window.requestAnimationFrame(update);
        }

        window.requestAnimationFrame(update);

        data = [
            { data: generate(index, 2, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
        ];
        options = {
            xaxes: [
                { position: 'bottom', axisLabel: 'X Axis', showTickLabels: 'none' },
                { position: 'bottom', axisLabel: 'Second X Axis', show: true, showTickLabels: 'none', showMinorTicks: true, gridLines: false, min: 0, max: 2},
                { position: 'top', axisLabel: 'Third X Axis', show: true, showTickLabels: 'none', showTicks: true, gridLines: false }
            ],
            yaxes: [
                { position: 'left', axisLabel: 'Y Axis', showTickLabels: 'none' },
                { position: 'right', axisLabel: 'Second Y Axis', show: true, showTickLabels: 'none', showTicks: true, gridLines: false }
            ]
        };

        plot = $.plot("#placeholder", data, options);

    });

    function toggleAxisLabels() {
        options.axisLabels = options.axisLabels || {show: true};
        options.axisLabels.show = !options.axisLabels.show;
        plot = $.plot("#placeholder", data, options);
    }

    </script>
</head>
<body>

    <div id="header">
        <h2>Flot Examples: Axes labels</h2>
    </div>

    <div id="content">

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>

        <button onclick="toggleAxisLabels()">Toggle axis labels visibility</button>

    </div>
</body>
</html>
